<template>
	<div>

		<div class="header">
			<span class="t1" @click="goback">
				< </span>
					<span class="t2">购物车</span>
					<span class="t3">a</span>
		</div>
		<p class="ps">配送至龙岩市</p>
		<div class="tiads">
			<span>100%正品</span>
			<span>天天有三折</span>
			<span>退换无忧</span>
		</div>
		<p class="self">唯品自营</p>
		<div class="good">
			<div class="aboutinfo">
				<input type="checkbox">
				<img src="../assets/iPhone/3.jpg" height="86" width="86" >
				<span class="ai">Mqd22夏季新款童装女</span>
				<span class="pris">￥188.00</span>
				<div class="bs">{{this.num}}</div>
				<div class="as" @click="add">+</div>
			</div>
			<div class="aboutinfo">
				<input type="checkbox">
				<img src="../assets/iPhone/3.jpg" height="86" width="86" >
				<span class="ai">Mqd22夏季新款童装女</span>
				<span class="pris">￥188.00</span>
				<div class="bs">{{this.num}}</div>
				<div class="as" @click="add">+</div>
			</div>
			<div class="aboutinfo">
				<input type="checkbox">
				<img src="../assets/iPhone/3.jpg" height="86" width="86" >
				<span class="ai">Mqd22夏季新款童装女</span>
				<span class="pris">￥188.00</span>
				<div class="bs">{{this.num}}</div>
				<div class="as" @click="add">+</div>
			</div>
			<div class="aboutinfo">
				<input type="checkbox">
				<img src="../assets/iPhone/3.jpg" height="86" width="86" >
				<span class="ai">Mqd22夏季新款童装女</span>
				<span class="pris">￥188.00</span>
				<div class="bs">{{this.num}}</div>
				<div class="as" @click="add">+</div>
			</div>
			<div class="aboutinfo">
				<input type="checkbox">
				<img src="../assets/iPhone/3.jpg" height="86" width="86" >
				<span class="ai">Mqd22夏季新款童装女</span>
				<span class="pris">￥188.00</span>
				<div class="bs">{{this.num}}</div>
				<div class="as" @click="add">+</div>
			</div>
		</div>
		<div class="bottomshop">
			
		</div>
		
		
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				num:1,
				shop:""
			}
		},
		methods:{
			add(){
				this.num+=1;
			},
			goback(){
				this.$router.back();
			}
		},
		mounted(){
			if (this.$route.query.shopinfo) {
			    let formObj = decodeURIComponent(this.$route.query.shopinfo)
			    this.shop = JSON.parse(formObj)
			}
		}
	}
</script>

<style scoped="scoped">
	.bottomshop{
		width: 370px;
		height:60px;
		margin-top: 450px;
		background-color: red;
		position: fixed;
	}
	.as{
		position: relative;
		top: -60px;
		left: 90px;
	}
	.bs{
		position: relative;
		top: -40px;
		left: 80px;
	}
	.aboutinfo{
		text-align: center;
		margin-left: 30px;
	}
	.aboutinfo img{
		vertical-align: middle;
	}
	.aboutinfo input {
		border-radius: 50%;
	}
	.ai{
		vertical-align: 19px;
		font-size: 14px;
	}
	.pris{
		position: relative;
		right: 150px;
		top: 15px;
		font-size: 16px;
		color: #F03867;
		font-weight: 600;
	}
	.header {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-between;
	}

	.header .t1 {
		margin-left: 10px;
		font-size: 20px;
	}

	.header .t2 {
		font-size: 18px;
		color: #555555;
	}

	.header .t3 {
		margin-right: 10px;
	}

	.ps {
		text-align: center;
		color: #98989F;
		font-size: 12px;
		margin-top: 5px;
	}
	.tiads{
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: space-evenly;
	}
	.tiads span {
			color: #555555;
		font-size: 13px;
	}
	.self{
		font-size: 16px;
		color:#222222;
		font-weight: 700;
		margin-left: 45px;
	}
</style>
